<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵动未来</title>
</head>
<body>

<div class="container">
    <h1><span class="rainbow-text">灵动未来</span></h1>

    <div class="chat-box" id="chat-box">
        <!-- 用户输入和AI回复将显示在这里 -->
    </div>

    <div class="input-area">
        <input type="text" id="info" name="info" placeholder="请输入内容..." required>
        <button type="submit" id="submit-btn">提交</button>
    </div>
</div>

<div class="creator">
    创作团队: 灵动AI团队<br>
    人员1: 刘源江<br>
    人员2: 付浩<br>
    人员3: 黄衠<br>
    人员4: 张荣臻<br>
    人员5: 王鑫<br>
</div>

<script>
    function submitMessage() {
        const chatBox = document.getElementById("chat-box");
        const info = document.getElementById("info").value;

        // 如果输入框为空，则不提交
        if (!info.trim()) return;

        // 清空输入框内容
        document.getElementById("info").value = '';

        // 添加用户输入到聊天框
        const userMessage = document.createElement("div");
        userMessage.className = "message user-message";
        userMessage.textContent = info;
        chatBox.appendChild(userMessage);

        // 滚动到最新消息
        chatBox.scrollTop = chatBox.scrollHeight;

        // 模拟 AI 回复 (这里应当替换为实际的 API 调用)
        try {
            // 发起 POST 请求到 FastAPI 服务器
            fetch("http://127.0.0.1:8000/task/chat", { // 修改为你的API URL
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ info })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error("请求失败，状态码: " + response.status);
                }
                return response.json();
            })
            .then(data => {
                // 显示AI回复到聊天框
                const aiMessage = document.createElement("div");
                aiMessage.className = "message ai-message";
                aiMessage.textContent = "灵动AI: " + data.message;
                chatBox.appendChild(aiMessage);

                // 滚动到最新消息
                chatBox.scrollTop = chatBox.scrollHeight;
            })
            .catch(error => {
                console.error("Error:", error);
                const errorMessage = document.createElement("div");
                errorMessage.className = "message ai-message";
                errorMessage.textContent = "请求失败，请检查控制台日志获取更多信息。";
                chatBox.appendChild(errorMessage);
                chatBox.scrollTop = chatBox.scrollHeight;
            });

        } catch (error) {
            console.error("Error:", error);
        }
    }

    // 按钮提交事件监听
    document.getElementById("submit-btn").addEventListener("click", function (e) {
        e.preventDefault(); // 阻止按钮默认行为
        submitMessage();
    });

    // 输入框回车键事件监听
    document.getElementById("info").addEventListener("keypress", function (e) {
        if (e.key === "Enter") { // 检测是否按下 Enter 键
            e.preventDefault();
            submitMessage();
        }
    });
</script>

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
        position: relative;
        min-height: 100vh;
    }
    .container {
        max-width: 600px;
        margin: 0 auto;
        background-color: white;
        padding: 10px; /* 减少整体容器的padding */
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        height: 90vh; /* 增加容器的高度 */
        justify-content: space-between;
    }
    h1 {
        text-align: center;
        margin: 10px 0; /* 减少标题上下的留白 */
    }
    .input-area {
        display: flex;
        justify-content: space-between;
        margin-top: 10px; /* 减少输入区域的上部留白 */
    }
    label {
        font-size: 1.2em;
    }
    input[type="text"] {
        width: 80%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    button {
        width: 15%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1em;
    }
    button:hover {
        background-color: #45a049;
    }
    .chat-box {
        margin-top: 10px;
        max-height: 70vh; /* 增加聊天框的高度 */
        overflow-y: auto;
        padding-right: 10px;
    }
    .message {
        padding: 10px;
        margin: 10px 0;
        border-radius: 10px;
        max-width: 70%; /* 调整消息气泡的最大宽度 */
        word-wrap: break-word;
    }
    .user-message {
        background-color: #d1e7dd;
        align-self: flex-start;
        margin-right: auto; /* 靠左对齐，消除右侧空格 */
    }
    .user-message::before {
        content: "用户: ";
        font-weight: bold;
    }
    .ai-message {
        background-color: #e9e9e9;
        align-self: flex-end;
        text-align: right;
        margin-left: auto; /* 靠右对齐，消除左侧空格 */
    }
    .creator {
        position: fixed;
        right: 10px;
        bottom: 10px;
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 8px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        font-size: 1em;
        color: #333;
    }

    /* 七彩渐变文字样式 */
    .rainbow-text {
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        -webkit-background-clip: text;
        color: transparent;
    }
</style>

</body>
</html>
